<template>
  <div style="height: 100%">
    <div style="overflow-y: auto; height: calc(100% - 200px)">
      <div v-if="items.length === 0">
        <div style="text-align: center; color: #8c939d">
          <i class="iconfont el-icon-document-delete" style="font-size: 36px;"></i><br/>
          <span>暂无数据</span>
        </div>
      </div>
      <div v-else>
        <div style="display: flex; flex-direction: column;" v-for="item in items">
          <div style="display: flex; flex-direction: row;align-items: center;">
            <div style="border-radius: 50%; height: 30px; width: 30px; background-color: #00a854; line-height: 30px; text-align: center; color: white">{{(item.UserName || 'T')[0]}}</div>
            <span style="font-size: 14px; margin-left: 10px">{{item.UserName}} 发表于：{{item.Createds}}&nbsp </span>
          </div>
          <div style="margin-left: 40px; max-height: 300px; overflow-y: auto;word-break: break-all;" v-html="item.Comment"></div>
        </div>
      </div>
    </div>
    <div style="position: absolute; left: 0; right: 0; bottom: 0;">
<!--      <el-input type="textarea" v-model="pushComment" :rows="inputRows" class="input"-->
<!--                placeholder="发表评论" @focus="inputFocus" @blur="inputBlur"></el-input>-->
      <tip-tap :configData="extensions" :height="height" v-model="pushComment" @focus="inputFocus" @blur="inputBlur"></tip-tap>
      <div style="display: flex; justify-content: space-between;align-items: center;">
        <div>
          <el-button type="text" size="medium" title="文件上传">
            <i class="el-icon-folder-add" style="font-size: 20px"></i>
          </el-button>
        </div>
        <el-button type="primary" style="height: 30px" @click="fabiaoComment">发表</el-button>
      </div>
<!--      <div>-->
<!--        <tip-tap></tip-tap>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
import {
  Doc,
  Text,
  Paragraph,
  Image
} from 'element-tiptap';
import TipTap from "@/components/element/tipTap";
import projectTaskApi from "@/api/projectTaskApi";
import { formatDateString } from '@/utils/date';

export default {
  name: "commentPan",
  components: {
    TipTap
  },
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    curFormData: {
      get () {
        return this.formData
      },
      set (val) {
        this.$emit('update:formData', val)
      }
    }
  },
  data () {
    return {
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Image(),
      ],
      items: [],
      inputRows: 1,
      pushComment: '',
      height: '150px'
    }
  },
  methods: {
    // 获取发表评论
    getComments (data) {
      if (data.Id) {
        projectTaskApi.getComments({ id: data.Id }).then(res => {
          if (res) {
            this.items = res || []
            this.items.forEach(it => {
              let e = it.Created.toString().length === 13 ? it.Created : it.Created * 1000
              this.$set(it, 'Createds', formatDateString(e, 'yyyy-MM-dd hh:mm:ss'))
            })
          }
        })
      }
    },
    // 发表
    fabiaoComment () {
      let da = {
        Taskid: this.curFormData.Id,
        Note: this.pushComment
      }
      projectTaskApi.createComments(da).then(res => {
        if (res) {
          this.$message({ type: res.code === 1 ? 'success':'warning', message: res.message });
          if (res.code === 1) this.getComments(this.curFormData)
        }
      })
    },
    inputFocus () {
      this.height = '300px'
      // this.inputRows = 3
    },
    inputBlur () {
      // this.inputRows = 1
      this.height = '150px'
    }
  }
}
</script>

<style scoped lang="scss">
.input >>> .el-textarea__inner {
  border: none;
  resize: none
}
.input >>> .el-textarea__inner:focus {
  border: 1px solid #eef1f6;
}
</style>